<template>
<!--头部-->
  <div class=" navHead" style="padding-right: 10px;">
    <div class="clearfix">
      <div class="clearfix navRight">
        <!--未登录-->
        <div class="userDeal" v-show="!isShow">
          <div class="downThis" >客户端下载
            <div class="downapp" >
              <p>扫码下载勤博教育APP</p>
              <img src="../../assets/app.png" alt="" width="134">
            </div>
          </div>
          <span @click="loginform"  class="loginBtn">登录</span>

        </div>
        <!--已登录-->
        <div class="userDeal" v-show="isShow">
          <div class="username">
            <img class="userImage" src="../../assets/headdefault.png" v-if="avatar === '' || avatar === null || avatar === undefined"/>
            <img class="userImage" :src="avatar" width="32" v-else/>
            <p v-if="nickName === '' || nickName === null || nickName === undefined">您好！未设置</p>
            <p v-else>您好！{{nickName}}</p>
          </div>
          <router-link to="/ziliao" class="userCenter" >个人中心</router-link>
          <span class="signOut" @click="logOut">退出</span>
        </div>
        <!--<div class="searchOut":style="{width:isShow? '39%':'55%'}">-->
        <div class="searchOut" style="width: initial;">
          <Input prefix="ios-search" placeholder="搜索课程" v-model="keyWord" :maxlength="40" class="inputSearch" @keydown.enter.native="search"/>
          <span class="searchBtn" @click="search" >搜索</span>
        </div>
      </div>
      <div class="navLeft">
        <ul class="navItem">
          <li @click="logoDetail()" style="width: 25%;"><img class="logoIcon" src="../../assets/qblogo2.png" width="300" /></li>
          <li><router-link to="/"  exact>首页</router-link></li>
          <li><router-link to="/college"  exact>行业学院</router-link></li>
          <li><router-link to="/zhuanhuan"  exact>学分银行</router-link></li>
          <li><a @click.prevent.stop="courseAll">在线课程</a>
            <div class="class_content">
              <ul>
                <li v-for="first in typeList">
                  <a class="title" @click.stop.prevent="courseList(first.id,1)">{{first.courseTypeName}}</a>
                  <a v-for="(second,index) in first.child" :key="index" @click.stop.prevent="courseList(second.id,2)">{{second.courseTypeName}}</a>
                </li>
              </ul>
            </div>
          </li>
          <li><router-link to="/ceping"  exact>人才测评</router-link></li>
          <li><router-link to="/kaoshi" exact :class="showOrder == 'kaoshi' ? 'navActive router-link-active' : ''">认证考试</router-link></li>
          <li><router-link to="/news" exact >新闻动态</router-link></li>
          <li><router-link to="/vip"  exact>VIP会员</router-link></li>
          <li><router-link to="/about" exact >关于我们</router-link></li>
          <!--<li><a  @click.stop.prevent="goZhuanhuan">学分认定</a></li>-->
          <li><router-link to="/linkus"  exact>联系我们</router-link></li>
          <!--<li><router-link to="/help" exact >帮助中心</router-link></li>-->
        </ul>
      </div>
    </div>
  <loginmodal  ref="loginA"></loginmodal>
  </div>

</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">

  .navHead{
    background-color: #fff;
    padding:0 100px ;
    min-width: 1200px;
    position: fixed;
    width: 100%;
    z-index: 999;
    .navLeft{
      float: left;
      /*padding: 0px 30px  ;*/
      position: relative;
      .logoIcon{
        margin: 15px 120px 0 0;
      }
      @media screen and (max-width: 1600px) {
        .logoIcon{
          margin: 10px 2px 0 0;
        }
      }
      @media screen and (max-width: 1600px) and (min-width: 1200px){
        .logoIcon{
          margin: 10px 20px 0 0;
        }
      }
      @media screen and (max-width: 1800px) and (min-width: 1600px){
        .logoIcon{
          margin: 10px 50px 0 0;
        }
      }
      .navItem{
        li{
          display: inline-block;
          vertical-align: middle;
          height: 60px;
          line-height: 60px;
          position: relative;
          a{
            display: inline-block;
            font-size: 14px;
            color: #666;
            text-align: center;
            padding: 0 15px;
            &:hover{
              background-color: #957960;
              color: #fff;
            }
          }
          .navActive{
            background-color: #957960;
            color: #fff;
          }
          .class_content{
            display: none;
            width: 1000px;
            background-color: #fff;
            box-shadow:0 2px 6px  rgba(102,102,102,0.36);
            position: absolute;
            z-index: 90;
            min-height: 426px;
            max-height: 426px;
            overflow: auto;
            left: 0px;
            top: 59px;
            padding: 20px;
            text-align: left;
            li{
              border-bottom: 1px solid #f0f0f0;
              text-align: left;
              height: 60px;
              line-height: 60px;
              width: 100%;
              .title{
                font-size: 14px;
                color: #000;
              }
              a{
                font-size: 12px;
                color: #666;
                position: relative;
                border-right: 1px solid #dbdbdb;
                padding:0 10px;
                line-height: 13px;
                &:hover{
                  background-color: transparent;
                  font-weight: 700;
                  color: #957960;
                }
              }
              a:last-child{
                border-right: none;
              }
              &:last-child{
                border-bottom: none;
              }
            }
          }
        }
        li:nth-child(5):hover .class_content{
          display: block;
          transition: all 0.3s;
        }
      }
    }
    .navRight{
      float: right;
      padding-top: 12px;
      .searchOut{
        float: right;
        margin-right: 8px;
        width: 42%;
        height: 32px;
        display: table;
        overflow: hidden;
        border: 1px solid #957960;
        border-radius: 3px;
        .ivu-input{
          display: table-cell;
          border: 1px solid #957960;
          width: 100%;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          color: #333;
          padding: 0 15px 0 5px;
        }

        .searchBtn{
          display: table-cell;
          width: 1px;
          height: 30px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          line-height: 30px;
          white-space: nowrap;
          padding: 0 15px;
          background-color: #957960;
          cursor: pointer;
          &:active{
            background-color: darken(#957960,3%);
          }
        }
      }
      .userDeal{
        float: right;
        text-align: right;
        position: relative;
        .downapp{
          display: none;
          background-color: #fff;
          text-align: center;
          font-size: 13px;
          color: #333;
          padding:  5px 10px 0;
          position: absolute;
          top:60px;
          right: -50px;
          box-shadow:0 2px 6px  rgba(102,102,102,0.36);
          z-index: 9;
          p{
            margin-bottom: 5px;
          }
        }
        .downThis,.loginBtn{
          display: inline-block;
          vertical-align: middle;
          height: 32px;
          line-height: 32px;
          padding: 0 12px;
          position: relative;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          &:hover{
            color: #957960;
          }
        }
        .downThis:hover .downapp{
          display: block;
        }
        .loginBtn{
          &::after{
            content: '';
            display: block;
            text-align: center;
            height: 12px;
            border-right: 1px solid #DBDBDB;
            position: absolute;;
            right: 0px;
            top: 10px;
          }
          &::after{
            left: 0px;
            right: inherit;
            border-left: 1px solid #DBDBDB;
            border-right: none;
          }
        }
        .username{
          display: inline-block;
          vertical-align: middle;
          //          .textEllipsis;
          position: relative;
          font-size: 14px;
          color: #333;
          height: 32px;
          line-height: 32px;
          padding: 0 10px 0 38px;
          p{
            max-width: 135px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .userImage{
            display: inline-block;
            width: 32px;
            height: 32px;
            position: absolute;
            left: 0px;
            top: 0px;
            overflow: hidden;
            border-radius: 50%;
          }
        }
        .userCenter,.signOut{
          display: inline-block;
          vertical-align: middle;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          margin: 0 10px;
          color: #957960;
          cursor: pointer;
        }
        .signOut{
          padding: 0 0 0 22px;
          background: url(../../assets/signout.png) no-repeat left center;
          background-size: 20px;
        }
      }
    }
  }
  @media screen and (max-width: 1500px) {
    .navHead{
      padding: 0 80px;
      .navLeft .navItem li a{
        padding: 0 4px;
      }
    }
  }
  @media screen and (max-width: 1600px) and (min-width: 1500px){
    .navHead{
      .navLeft .navItem li a{
        padding: 0 10px;
      }
    }
  }
  @media only screen and (max-width: 1420px) and (min-width: 1200px){
    .navHead{
      padding: 0;
      .navLeft .navItem li a{
        padding: 0 7px;
      }
    }

  }
</style>
<script type="text/ecmascript-6">
  import loginmodal from './loginmodal'
  import {coursetypeList,centreInfoWeb} from '../../http'
  import {getStore,setStore} from '../../storage'

    export default {
        inject:['reload'],
        name: '',
        props: {},
        data() {
            return {
              isShow:false,
              typeList:'',
              keyWord:'',
              nickName:'',
              phone:'',
              avatar:'',
              showOrder: ''
            };
        },
        methods: {
          //跳转学分转换页面
          goZhuanhuan(){
            //用户是否登录，同时获取用户信息
            centreInfoWeb().then(res => {
                if(res.code === 200) {
                  this.$router.push({
                    name:'zhuanhuan3'
                  })
                }else{
                  this.$refs.loginA.showModal();
                }
            }).catch()
          },
          //显示登录框
          loginform(){
            this.$refs.loginA.showModal();
          },
          //用户登出
          logOut(){
            window.localStorage.clear();
            this.nickName = '';
            this.avatar = '';
            this.isShow = false;
            this.reload();
            this.$router.push({name:'index'});
          },
          //获取用户信息
          getInfo(){
            //判断用户是否登录
            if(getStore('token') !== null && getStore('token') !== undefined && getStore('token') !== '') {
              //获取用户信息
                centreInfoWeb().then(res => {
                  if(res.code === 200) {
                    this.nickName = res.data.nickName;
                    this.avatar = res.data.avatar;
                    this.isShow = true;
                  }else {
                    this.nickName = '';
                    this.avatar = '';
                    this.isShow = false;
                    this.getCourseType();
                    // this.reload();
                    /*if(this.$parent.getIndex !== undefined){
                      this.$parent.getIndex();
                      this.getCourseType()
                    }*/
                  }
                }).catch()
            }
          },
          //全部课程
          courseAll(){
            this.$router.push({
              name:'courselist',
              query:{
                coursetype:-1
              }
            })
            this.reload();
          },
          logoDetail(){
            this.$router.push({
              name:'college',
              query:{}
            })
          },
          //获取课程列表
          courseList(id,type){
            this.$router.push({
              name : 'courselist',
              query:  {
                coursetype:type,
                coursetypeId:id,
              }
             });
            this.reload();
          },
          //搜索课程
          search(){
            if(this.keyWord.trim() !== "") {
              this.reload();
              this.$router.push({
                name: 'search',
                query: {
                  keyWord: this.keyWord.trim(),
                }
              })
            }else{
              this.$Notice.warning({
                title: "课程搜索提醒",
                desc: "请输入搜索内容",
                duration: 3,
              });
            }
          },
          //课程列表初始化
          getCourseType(){
            coursetypeList().then(res => {
              this.typeList = res.data;
            }).catch();
          }
        },
        created() {
          //获取课程类型列表
          this.getCourseType();
          this.getInfo();
          let so = this.$parent.showOrder
          if(so != undefined && so != ''){
            this.showOrder = this.$parent.showOrder
          }
        },
        components: {
          loginmodal
        }
    }
</script>
